<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>乐购-商品详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/css/see/reset.min.css">
    <link rel="stylesheet" href="/plugins/swiper/swiper4.2.min.css">
    <link rel="stylesheet" href="/css/purchase/goodsDetails1.min.css?v=<%=$version%>">
</head>
<body>
<div id="goodsDetails" v-cloak>
    <template v-if="isShow==1">
        <div class="goodsDetails-header clearfix" v-if="!isTop">
            <span class="goodsDetails-gobk" @click="getBack()"></span>
            <span class="goodsDetails-fx"></span>
        </div>
        <aside class="purchase-slider">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in productById.images">
                        <img :src="item.imgSrc" class="lazy">
                    </div>
                    <!--<div class="swiper-slide">-->
                        <!--<img data-src="/imgs/happyi/index/bpic1.png" class="swiper-lazy">-->
                    <!--</div>-->
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </aside>
        <div class="goodsDetails-top">
            <template v-if="isNum==1">
                <div class="goodsDetails-topMeney">
                    <span class="topMeney-icon">{{integral}}</span>
                </div>
            </template>
            <template v-if="isNum==2">
                <div class="goodsDetails-zkTop clearfix">
                    <strong>{{productById.people}}</strong>人参与拼折扣
                    <span class="zkTop-data">剩余时间:<span>{{hours}}</span>:<span>{{minutes}}</span>:<span>{{seconds}}</span></span>
                </div>
                <div class="goodsDetails-zkSpeed"><span :style="{'width':+100-productById.lastStocks+'%'}"></span></div>
                <ul class="goodsDetails-zkCent">
                    <template v-for="(item,index) in productById.discounts">
                        <li class="original" v-if="parseInt(item.endPeoples)<parseInt(productById.people)&&item.isCurrent==0">
                            <strong>{{item.discount}}</strong>
                            <span>{{item.beginPeoples}}-{{item.endPeoples}}</span>
                        </li>
                        <li class="now" v-else-if="item.isCurrent==1">
                            <strong>{{item.discount}}</strong>
                            <span>{{item.beginPeoples}}-{{item.endPeoples}}</span>
                        </li>
                        <li v-else-if="parseInt(item.endPeoples)>parseInt(productById.people)&&item.isCurrent==0">
                            <strong>{{item.discount}}</strong>
                            <span>{{item.beginPeoples}}-{{item.endPeoples}}</span>
                        </li>
                    </template>
                </ul>
                <!--<div class="goodsDetails-zkMoney">-->
                    <!--<span class="zkMoney-left">现价</span>-->
                    <!--<span class="topMeney-icon">{{productById.activityPrice}}</span>-->
                    <!--<span class="zkMoney-right"><i></i>{{productById.discount}}折<i></i>原价<del class="purchase-mong">{{productById.integral}}</del></span>-->
                <!--</div>-->
            </template>
            <template  v-if="isNum==3">
                <div class="goodsDetails-zkTop goodsDetails-MSTop clearfix">
                    <strong></strong>
                    <span class="zkTop-data">剩余时间:<span>{{hours}}</span>:<span>{{minutes}}</span>:<span>{{seconds}}</span></span>
                </div>
                <div class="goodsDetails-MScent">
                    <div class="secondKill-snatch clearfix">
                        <span class="secondKill-snatchLeft">抢到<br>会员</span>
                        <div class="secondKill-snatchCent clearfix">
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide snatchCent-list" v-for="item in productById.users">
                                        <strong :style="bgimg(item.headImg)"></strong>{{item.uName}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template  v-if="isNum==4">
                <div class="goodsDetails-zkTop goodsDetails-BKTop clearfix">
                    <strong></strong>
                    <span class="zkTop-data">剩余时间:<span>{{hours}}</span>:<span>{{minutes}}</span>:<span>{{seconds}}</span></span>
                </div>
                <div class="goodsDetails-MScent">
                    <div class="secondKill-snatch clearfix">
                        <span class="secondKill-snatchLeft">抢到<br>会员</span>
                        <div class="secondKill-snatchCent clearfix">
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide snatchCent-list" v-for="item in productById.users">
                                        <strong :style="bgimg(item.headImg)"></strong>{{item.uName}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <div class="goodsDetails-zkMoney" v-if="isNum!=1">
                <span class="zkMoney-left">现价</span>
                <span class="topMeney-icon">{{integral}}</span>
                <span class="zkMoney-right"><i></i>{{productById.discount}}折<i></i>原价<del class="purchase-mong">{{productById.activityPrice}}</del></span>
            </div>
            <div class="goodsDetails-topTitle">
                <h6>{{productById.title}}</h6>
                <p>{{productById.subtitle}}</p>
            </div>
            <div class="goodsDetails-topOther">已选择：{{colorName}}&nbsp;&nbsp;{{specName}}&nbsp;<span v-if="colorName||specName">x&nbsp;{{number}}</span><span class="purchase-more2" @click="isDisplay()"></span></div>
            <div class="goodsDetails-topService">
                <span>服务：</span>
                <div class="topService-div" v-text="productById.afterService">
                    <!--<strong><span>&bull;</span>免费配送</strong><br>-->
                    <!--<strong><span>&bull;</span>30天无忧退换货</strong>-->
                    <!--<strong><span>&bull;</span>部分地区不配送</strong>-->
                </div>
                <strong class="purchase-more2"></strong>
            </div>
        </div>
        <div class="goodsDetails-comment">
            <div class="goodsDetails-commentTitle">用户评价&nbsp;(5545)<span>95.8%好评</span><strong class="purchase-more2"></strong></div>
            <div class="comment-list" v-if="comment">
                <div class="comment-listTitle clearfix">
                    <!--{{productById.comment}}-->
                    <span class="comment-headImg" :style="bgimg(comment.headImg)"></span>
                    <span class="comment-headName">{{comment.uName}}</span>
                    <strong class="goodsDetails-sppls" v-for="n in 5">
                        <span :class="{'goodsDetails-sppls1':n<=comment.star}"></span>
                    </strong>
                    <span class="comment-data">{{comment.createDate}}</span>
                </div>
                <h6>{{comment.content}}</h6>
                <!--<div class="comment-listImg clearfix">-->
                    <!--<img src="/imgs/happyi/index/bpic1.png" class="lazy">-->
                    <!--<img src="/imgs/happyi/index/bpic1.png" class="lazy">-->
                <!--</div>-->
                <p>{{comment.colorName}}</p>
            </div>
        </div>
        <div class="goodsDetails-relevant">
            <div class="goodsDetails-commentTitle">相关推荐<strong class="purchase-more2"></strong></div>
            <div class="goodsDetails-rSlide">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in productById.recs">
                            <div class="slide-img">
                                <img :src="item.imgSrc" class="swiper-lazy">
                            </div>
                            <h6>{{item.title}}</h6>
                            <span class="purchase-mons">{{item.integral}}</span>
                        </div>
                        <!--<div class="swiper-slide">-->
                            <!--<div class="slide-img">-->
                                <!--<img data-src="/imgs/see/index/index-bgimg1.png" class="swiper-lazy">-->
                            <!--</div>-->
                            <!--<h6>净化器净化器净化器</h6>-->
                            <!--<span class="purchase-mons">99900</span>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </div>
        <div class="goodsDetails-Btn" id="goodsDetails-Btn">
            <span class="goodsDetails-up" @click="getGoodsTab(2)">上拉查看图文详情</span>
        </div>
    </template>
    <div class="goodsDetails-InfoTitle" v-if="isTop">
        <span class="goback" @click="getBack()"></span>
        <strong :class="{active:isShow==1}" @click="getGoodsTab(1)">商品</strong>
        <strong class="ml3" :class="{active:isShow==2}" @click="getGoodsTab(2)">详情</strong>
        <strong :class="{active:isShow==3}" @click="getGoodsTab(3)">评价</strong>
        <span class="discount-spsre"></span>
    </div>
    <!--<template v-if="isShow!=1">-->
        <!--<div class="goodsDetails-InfoTitle">-->
            <!--<span class="goback"></span>-->
            <!--<strong :class="{active:isShow==1}" @click="getGoodsTab(1)">商品</strong>-->
            <!--<strong class="ml3" :class="{active:isShow==2}" @click="getGoodsTab(2)">详情</strong>-->
            <!--<strong :class="{active:isShow==3}" @click="getGoodsTab(3)">评价</strong>-->
            <!--<span class="discount-spsre"></span>-->
        <!--</div>-->
    <!--</template>-->
    <template v-if="isShow==2">
        <div class="goodsDetails-Btn goodsDetails-Btn1" id="goodsDetails-Btn" @click="getGoodsTab(1)"><span class="goodsDetails-down">下拉返回顶部</span></div>
        <div class="goodsDetails-InfoCent">
            <!--<ul class="InfoCent-text">-->
                <!--<li><span>产品颜色</span>发斯蒂芬是</li>-->
                <!--<li><span>产品颜色</span>发斯蒂芬是</li>-->
                <!--<li><span>产品颜色</span>东方闪电</li>-->
                <!--<li><span>产品颜色</span>热污染无</li>-->
                <!--<li><span>产品颜色</span>而我若无若</li>-->
            <!--</ul>-->
            <div class="InfoCent-Img" v-html="productById.descript">
                <img src="/imgs/happyi/index/bpic1.png" class="lazy">
                <img src="/imgs/happyi/index/bpic1.png" class="lazy">
                <img src="/imgs/happyi/index/bpic1.png" class="lazy">
            </div>
        </div>
    </template>
    <template v-if="isShow==3">
        <div class="goodsDetails-evaluateTop">
            <div class="evaluateTop">
                <span class="evaluateTop-left">评分</span>
                <strong class="goodsDetails-sppls" v-for="n in 5">
                    <span :class="{'goodsDetails-sppls1':n<=3}"></span>
                </strong>
                <span class="evaluateTop-right">95%好评</span>
            </div>
            <div class="evaluate-classfiy">
                <strong class="active">
                    <span class="goodsDetails-icon">√</span>全部<span>171</span>
                </strong>
                <strong>
                    <span class="goodsDetails-icon">√</span>好评<span>168</span>
                </strong>
                <strong>
                    <span class="goodsDetails-icon">√</span>好评<span>18</span>
                </strong>
                <strong>
                    <span class="goodsDetails-icon">√</span>好评<span>8</span>
                </strong>
                <strong>
                    <span class="goodsDetails-icon">√</span>好评<span>168</span>
                </strong>
            </div>
        </div>
        <div class="goodsDetails-comment goodsDetails-evaluateList">
            <div class="comment-list" v-for="item in commentById2">
                <div class="comment-listTitle clearfix">
                    <span class="comment-headImg" :style="bgimg(item.headImg)"></span>
                    <span class="comment-headName">{{item.uName}}</span>
                    <strong class="goodsDetails-sppls" v-for="n in 5">
                        <span :class="{'goodsDetails-sppls1':n<=item.star}"></span>
                    </strong>
                    <span class="comment-data">{{item.createDate}}</span>
                    <!--<strong class="goodsDetails-sppls"><span class="goodsDetails-sppls1"></span></strong>-->
                    <!--<strong class="goodsDetails-sppls"><span class=""></span></strong>-->
                    <!--<strong class="goodsDetails-sppls"><span class=""></span></strong>-->
                    <!--<strong class="goodsDetails-sppls"><span class=""></span></strong>-->
                    <!--<strong class="goodsDetails-sppls"><span class=""></span></strong>-->
                    <!--<span class="comment-data">2018/04/26</span>-->
                </div>
                <h6>{{item.content}}</h6>
                <div class="comment-listImg clearfix" v-if="item.images">
                    <template v-for="list in item.images">
                        <img :src="list.imgSrc" class="lazy">
                    </template>
                </div>
                <div class="evaluateList-butt">
                    <p>颜色：{{item.colorName}}</p>
                    <p>购买日期：{{item.orderDate}}</p>
                </div>
                <div class="evaluateList-reply">
                    {{item.rName}}回复：感谢您对我们的支持，祝您每天都能拥有阳光般的好心情
                </div>
            </div>
        </div>
        <!--<div class="goodsDetails-comment goodsDetails-evaluateList">-->
            <!--<div class="comment-list">-->
                <!--<div class="comment-listTitle clearfix">-->
                    <!--<span class="comment-headImg"></span>-->
                    <!--<span class="comment-headName">的健身卡就</span>-->
                    <!--<strong class="goodsDetails-sppls"><span class="goodsDetails-sppls1"></span></strong>-->
                    <!--<strong class="goodsDetails-sppls"><span class=""></span></strong>-->
                    <!--<strong class="goodsDetails-sppls"><span class=""></span></strong>-->
                    <!--<strong class="goodsDetails-sppls"><span class=""></span></strong>-->
                    <!--<strong class="goodsDetails-sppls"><span class=""></span></strong>-->
                    <!--<span class="comment-data">2018/04/26</span>-->
                <!--</div>-->
                <!--<h6>建设大街富士康来得及弗兰克时间飞逝</h6>-->
                <!--<div class="comment-listImg clearfix">-->
                    <!--<img src="/imgs/happyi/index/bpic1.png" class="lazy">-->
                    <!--<img src="/imgs/happyi/index/bpic1.png" class="lazy">-->
                <!--</div>-->
                <!--<div class="evaluateList-butt">-->
                    <!--<p>颜色：磨砂白</p>-->
                    <!--<p>购买日期：2018/04/14</p>-->
                <!--</div>-->
                <!--<div class="evaluateList-reply">-->
                    <!--小乐回复：感谢您对我们的支持，祝您每天都能拥有阳光般的好心情-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    </template>
    <div class="goodsDetails-butt">
        <!--<span class="goodsDetails-mak"></span>-->
        <span class="goodsDetails-kefu"></span>
        <span class="goodsDetails-cuwux" @click="getNext(2)"></span>
        <span class="goodsDetails-news">{{cartCountNum}}</span>
        <a class="goodsDetails-buttBtn" @click="getNext(1)">加入购物车</a>
        <!--<a class="goodsDetails-buttBtn" v-if="isNum==1" @click="getNext(1)">加入购物车</a>-->
        <!--<a class="goodsDetails-buttBtn1" v-if="isNum==2">看广告&nbsp;&nbsp;抢购折扣商品<span class="goodsDetails-video"></span></a>-->
        <!--<a class="goodsDetails-buttBtn1" v-if="isNum==3">看广告&nbsp;&nbsp;抽取秒杀商品<span class="goodsDetails-video"></span></a>-->
        <!--<a class="goodsDetails-buttBtn1" v-if="isNum==4">看广告&nbsp;&nbsp;抽取爆款商品<span class="goodsDetails-video"></span></a>-->
    </div>
    <div id="mask" v-show="isClassify"></div>
    <div class="goodsDetails-choice" v-show="isClassify">
        <span class="goodsDetails-choiceBtn" @click="isDisplay()">×</span>
        <div class="choice-top clearfix">
            <strong :style="bgimg(imgSrc)"></strong>
            <p class="choice-topmt">价格：<span class="purchase-mons">{{integral}}</span></p>
            <p>已选：{{colorName}}&nbsp;&nbsp;{{specName}}</p>
        </div>
        <div class="goodsDetails-choiceCent">
            <div class="choice-cent">
                <p>颜色</p>
                <span v-for="item in productById.colors" :class="{'active':colorId==item.productColorId}" @click="getInfo(1,item)">{{item.name}}</span>
            </div>
            <div class="choice-cent">
                <p>规格</p>
                <span v-for="item in productById.specs" :class="{'active':specId==item.productSpecId}" @click="getInfo(2,item)">{{item.name}}</span>
            </div>
            <div class="choice-butt">
                <p>数量</p>
                <div class="choice-buttDiv clearfix ">
                    <span class="choice-buttBtn1" @click="getReduce()">－</span>
                    {{number}}
                    <span class="choice-buttBtn2" @click="getAdd()">＋</span>
                </div>
            </div>
        </div>
    </div>
    <prompt-view ref="prompt"></prompt-view>
</div>
<script src='/plugins/js/jquery-1.11.3.min.js'></script>
<script type="text/javascript" src="/plugins/js/vue.min.js"></script>
<script type="text/javascript" src="/plugins/js/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="/plugins/swiper/swiper.min.4.2.js"></script>
<script type="text/javascript" src="/js/purchase/goodsDetails1.js?v=<%=$version%>"></script>
<script>
    var swiper1 = new Swiper(".purchase-slider .swiper-container",{
        spaceBetween: 30,
        centeredSlides: true,
        // autoplay: {
        //     delay: 2500,
        //     disableOnInteraction: false
        // },
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction'
        },
        lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 2
        },
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true//修改swiper的父元素时，自动初始化swiper
    });
    var swiper = new Swiper('.goodsDetails-rSlide .swiper-container', {
        spaceBetween: 10,
        slidesPerView: 'auto',
        freeMode: true,
        lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 4
        },
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true//修改swiper的父元素时，自动初始化swiper
    });
    $("img.lazy").lazyload();
</script>
</body>
</html>